<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>前台页面</title>
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="./bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="./bootstap/js/jquery-1.6.2.js"></script>
<style type="text/css">
			div span{
				color: coral;
			}
		</style>
<script type="text/javascript">
		function checkName(){
			//获取用户名输入控件对象的内容
				var txtName = document.getElementById("textId").value;
				//信息提示框
				var sptxtName = document.getElementById("sptxtName");
				if(txtName == null || txtName == ""){
					//验证失败
					isChecked = false;
					//提示信息					
					sptxtName.innerHTML = "请输入姓名！";
					//修改标志变量
					return false;
				}else{
					sptxtName.innerHTML="";
					//修改标志变量
					return true;
				}
		}
		
		function checkPsw(){
			//密码非空验证
				var txtPsw = document.getElementById("inputPassword").value;
				
				//信息提示框
				var sptxtPsw = document.getElementById("ptxtPsw");
				if(txtPsw == null || txtPsw == ""){		
					
					//错误提示信息
					//提示信息					
					sptxtPsw.innerHTML = "请输入密码！";
					return false;
				}else{
					//验证通过  清空提示内容
					sptxtPsw.innerHTML = "";
					return true;
				}
		}
		
		function checkP(){
				// 验证性别 是否选择
				// 使用循环验证单选组是否进行了选择
				var textP = document.getElementsByName("textP");
				//遍历所有的单选组件，验证是否进行了选择
				var isChP = false;
				for(var i =0;i<textP.length;i++){
					//判定是否进行了选择
					if(textP[i].checked){
						//选择了
						isChP = true;
						//结束循环
						break;
					}
				}
				//信息提示框
				var sptxtP = document.getElementById("sptxtP");
				//设置身份验证结果
				if(!isChP){
					
					//错误提示信息
					sptxtP.innerHTML = "请选择身份！";
					return false;
				}else{
					sptxtP.innerHTML = "";
					return true;
				}
				
		}
		
			
		function checkMe(){
			//用户名验证
			var ischName = checkName();
			//密码验证
			var ischPsw = checkPsw();
			//性别
			var isP = checkP();
			
			if(ischName && ischPsw && isP ){
				//验证通过
				return true;
			}else{				
				return false;
			}
		}
		</script>
</head>
<body>
	<div  style=" margin-top:100px ; " >
	<form class="form-horizontal" role="form" action="LoginServlet" method="post">
		
			<div class="form-group" style="padding-left: 200px;">
				<label for="textName" class="col-sm-2 control-label">用户名</label>
				<div class="col-sm-10" style="width: 300px;">
					<input type="text" class="form-control " id="textId"
						name="textName" placeholder="用户名" onblur="checkName();"/>
					<div>
						<span id="sptxtName"></span>
					</div>
				</div>
			</div>
			<div class="form-group" style="padding-left: 200px;">
				<label for="inputPassword" class="col-sm-2 control-label">密码</label>
				<div class="col-sm-10" style="width: 300px;" >
					<input type="password" class="form-control" id="inputPassword"
						name="pswName" placeholder="密码" onblur="checkPsw(this);"/>
					<div>
						<span id="ptxtPsw"></span>
					</div>
				</div>
			</div>
			<div class="form-group" style="padding-left: 200px;">
	        <label class="col-sm-2 control-label">身份</label>
	            <div class="col-sm-10" style="width: 300px">
		        <label class="radio-inline"> 
		           <input type="radio" name="textP" id="text0" value="0" onclick="checkP()">管理员</label> 
		        <label class="radio-inline"> 
		           <input type="radio" name="textP" id="text1" value="1" onclick="checkP()">教师</label>
		           <label class="radio-inline"> 
		           <input type="radio" name="textP" id="text2" value="2" onclick="checkP()">学生</label>
		           <div><span id="sptxtP"></span></div>
		       </div>
	       </div> 
			<div class="form-group" style="padding-left: 200px;">
				<div class="col-sm-offset-2 col-sm-10">
					<div class="checkbox">
						<label> <input type="checkbox"> 记住我
						</label>
					</div>
				</div>
			</div>
			<div class="form-group" style="padding-left: 200px;">
				<div class="col-sm-offset-2 col-sm-10">
                    <input type="submit" value="登录" id="btnSubmit" onclick="return checkMe();"/>				
				</div>
			</div>
		
	</form>
</div>
</body>
</html>